<template>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v,index) in arr" :key="index"><img :src="v" alt=""></van-swipe-item>
      </van-swipe>
      <div class="zhiliang">
        <div><img src="https://static.asus.com.cn/store/20200608/15263710052535.png" alt=""><span>全面保*</span></div>
        <div><img src="https://static.asus.com.cn/store/20200608/15273050985198.png" alt=""><span>贵就赔*</span></div>
        <div><img src="https://static.asus.com.cn/store/20200608/15273897494997.png" alt=""><span>慢就赔*</span></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              arr:[]
          }
      },
      mounted(){       
          this.$http({
              url:"http://localhost:3000/swipe",
              method:"get"
          }).then(res=>{
              this.arr = res.data;

          })
        }    
  }
  </script>
  
  <style scoped>
  .zhiliang{
    display: flex;
    font-size: 3vw;
    color: rgba(0, 0, 0, 0.431);
    padding: 2vw 24vw;
  }
  .zhiliang div{
    display: flex;
    margin-left: 2vw;
  }
  .zhiliang img{
    width: 4vw;
    height: 4vw;
  }
    .my-swipe{
      width: 100vw;
      height: 55vw;
    }
    .my-swipe img{
      width: 100%; 
      height: 100%;
    }
  </style>